{% extends "_layouts/examples.html" %}
{% block title %}Table of contents / Sections{% endblock %}

{% block standalone_css %}patterns_table-of-contents{% endblock %}

{% block content %}
<aside class="p-table-of-contents">
  <div class="p-table-of-contents__section">
    <h2 class="p-table-of-contents__header">On this page</h2>
    <nav class="p-table-of-contents__nav" aria-label="Table of contents">
      <ul class="p-table-of-contents__list">
        <li class="p-table-of-contents__item"><a class="p-table-of-contents__link" href="#link1">Install from snap</a></li>
        <li class="p-table-of-contents__item"><a class="p-table-of-contents__link" href="#link2">Initialisation</a></li>
        <li class="p-table-of-contents__item"><a class="p-table-of-contents__link is-active" href="#link3">Configuration verification</a>
          <ul class="p-table-of-contents__list">
            <li class="p-table-of-contents__item"><a class="p-table-of-contents__link" href="#">Networkd backend</a></li>
            <li class="p-table-of-contents__item"><a class="p-table-of-contents__link" href="#">NetworkManager backend</a></li>
          </ul>
        </li>
        <li class="p-table-of-contents__item"><a class="p-table-of-contents__link" href="#link4">Service statuses</a></li>
      </ul>
    </nav>
  </div>
  <div class="p-table-of-contents__section">
    <h2 class="p-table-of-contents__header">Resources</h2>
    <nav class="p-table-of-contents__nav" aria-label="Resources">
      <ul class="p-table-of-contents__list">
        <li class="p-table-of-contents__item"><a class="p-table-of-contents__link" href="#link1">Documentation</a></li>
        <li class="p-table-of-contents__item"><a class="p-table-of-contents__link" href="#link2">Forum</a></li>
        <li class="p-table-of-contents__item"><a class="p-table-of-contents__link" href="#link3">GitHub</a></li>
      </ul>
    </nav>
  </div>
</aside>
{% endblock %}
